<!DOCTYPE html>
<html>
<meta charset="UTF-8">
<meta name="viewport" content="maximum-scale=1.0,minimum-scale=1.0,user-scalable=0,width=device-width,initial-scale=1.0" />
<title>搜禾网·双十一活动</title>
<link rel="stylesheet" type="text/css" href="{:_SKIN}/weixin/miaosha/css/reset.css"/>
<link rel="stylesheet" href="{:_SKIN}/weixin/miaosha/css/layer-animate_1.css"/>
<link href="{:_SKIN}/weixin/miaosha/css/fliptimer.css" rel="stylesheet" type="text/css" />
<script src="{:_SKIN}/weixin/miaosha/js/rem.js" type="text/javascript"></script>
<script src="{:_SKIN}/weixin/miaosha/js/vue.min.js" type="text/javascript"></script>
<script src="{:_SKIN}/weixin/miaosha/js/axios.min.js" type="text/javascript"></script>
<style type="text/css">
.bg{width: 100%;height: 78rem;background-image: url({:_SKIN}/weixin/miaosha/img/bg.png);background-repeat: no-repeat;background-size: 100% 100%;position: relative;margin: 0 auto;text-align: center;}
.jd{position: absolute;}
.aa{margin: 0 auto;top: 3rem;width: 100%;}
.bb{width: 100%;margin: 0 auto;top: 4.5rem;}
.cc{width: 100%;margin: 0 auto;top: 6rem;}
.cc1{width: 44%;float: left;padding: 0 .21rem;}
.dd{width: 100%;margin: 0 auto;top: 9.7rem;}
.ee{width: 100%;margin: 0 auto;top: 9.5rem;}
._end{width: 100%;margin: 0 auto;top: 9.5rem;}
.ff{width: 100%;margin: 0 auto;top: 11rem;}
.gg{width: 100%;margin: 0 auto;top: 12.5rem;}
.hh{width: 100%;margin: 0 auto;top: 14rem;}
.countdown{top: 3.4rem;width: 100%;margin: 0 auto;}
/*弹窗*/
.tc{width: 100%;height: auto;z-index: 999;top: 20rem;}
.tc1{width: 90%;height: 4.2rem;margin: 0 auto;background-image: url({:_SKIN}/weixin/miaosha/pic/bg.png);background-repeat: no-repeat;background-size: 100% auto;}
.tc2{width: 100%;top: .4rem;text-align: center;}
.tc3{width: 100%;top: 1rem;text-align: center;}
.tc4{width: 100%;top: 1.3rem;text-align: center;}
.pwd{width: 90%;background: none;border: none;border-bottom: 3px solid #FFFFFF;height: 30px;color: #FFFFFF;font-size: 14px;}
.tc5{top: 2rem;text-align: center;}
.tc5 img{padding: 0 4px;}
.tc6{width: 100%;top: 3.8rem;text-align: center;}
.countdown{list-style:none;padding:0;display:block;text-align:center;z-index:3}
.countdown li{display:inline-block}
.countdown li span{font-size:24px;line-height:24px}
.countdown li.seperator{font-size:24px;line-height:24px;vertical-align:top}
.countdown li p{color:#a7abb1;font-size:14px}
.orrar     {display:none;}
#timer     {display:none;}
</style>
</head>
<!--onload="leftTimer()"-->
<body <?php if ($res['starttime'] <= time() && $res['overtime']>= time() ): ?> onload="leftTimer(<?php echo date("Y",$res['overtime']);?>,<?php echo date("m",$res['overtime']);?>,<?php echo date("d",$res['overtime']);?>,<?php echo date("H",$res['overtime']);?>,<?php echo date("i",$res['overtime']);?>,<?php echo date("Y",$res['overtime']);?>)" <?php endif; ?>   >
<h2 class="orrar">剩余时间:</h2>
<div id="timer"></div>
<div class="bg">
<?php if ($res['starttime'] >= time() ): ?> 
	<ul class="countdown jd">
		<li> <span class="days">**</span>
		</li>
		<li class="seperator" style="font-size: 16px;">天</li>
		<li> <span class="hours">**</span>
		</li>
		<li class="seperator">:</li>
		<li> <span class="minutes">**</span>
		</li>
		<li class="seperator">:</li>
		<li> <span class="seconds">**</span>
		</li>
	</ul>
<?php else: ?>
	<ul class="countdown jd">
		<li> <span class="days">00</span>
		</li>
		<li class="seperator" style="font-size: 16px;">天</li>
		<li> <span class="hours">00</span>
		</li>
		<li class="seperator">:</li>
		<li> <span class="minutes">00</span>
		</li>
		<li class="seperator">:</li>
		<li> <span class="seconds">00</span>
		</li>
	</ul>
<?php endif; ?>  
	<div class="jd aa">
		<img src="{:_SKIN}/weixin/miaosha/img/a8.png" width="70%"/>
	</div>
	<div class="jd bb">
		<img src="{:_SKIN}/weixin/miaosha/img/a1.png" width="50%"/>
	</div>
	<div class="jd cc">
		<div class="cc1">
			<img src="{:_SKIN}/weixin/miaosha/img/a5.png" width="100%"/>
		</div>
		<div class="cc1">
			<img src="{:_SKIN}/weixin/miaosha/img/a6.png" width="100%"/>
		</div>
	</div>
	<div class="dd jd">
		<img src="{:_SKIN}/weixin/miaosha/img/a9.png" width="60%"/>
	</div>
	<?php if ( $res['num'] ==0): ?> 
	<!--抢完了-->
	<div class="ee jd">
		<a href="javascript:;"  class="endWay">
			<img src="{:_SKIN}/weixin/miaosha/pic/qq.png" width="60%"/>
		</a>
	</div>
	<?php endif; ?>
	<?php if ( $res['num'] ==0 || $res['overtime']<= time ): ?> 
	<!--抢完了-->
	<div class="ee jd">
		活动已经结束
	</div>
	<?php endif; ?>
	<div class="ff jd">
		<a id="btn">
			<img src="{:_SKIN}/weixin/miaosha/img/a4.png" width="60%"/>
		</a>
	</div>
	<div class="gg jd">
		<img src="{:_SKIN}/weixin/miaosha/img/a2.png" width="50%"/>
	</div>
	<div class="hh jd">
		<img src="{:_SKIN}/weixin/miaosha/img/a7.png" width="90%"/>
	</div>
</div>
<div  id="box" style="display: none; position: fixed; width: 100%;height: 100%;top:0; background-color:rgba(0,0,0,0.6);z-index: 990;"></div>
<div style="display: none; position: fixed; width: 100%;height: auto;top:0;top: 2.5rem;z-index: 999;" id="bb">
	<div class="tc1" style="position: relative;">
		<div class="tc2 jd">
			<img src="{:_SKIN}/weixin/miaosha/pic/a1.png" width="80%"/>
		</div>
		<div class="tc3 jd">
			<img src="{:_SKIN}/weixin/miaosha/pic/a6.png" width="80%"/>
		</div>
		<div class="tc4 jd">
			<input type="text" id="pwd" class="pwd"/>
		</div>
		<div class="tc5 jd">
			<img src="{:_SKIN}/weixin/miaosha/pic/a4.png" width="47%" style="float: left;" class='qd'/>
			<img src="{:_SKIN}/weixin/miaosha/pic/a5.png" width="47%" style="float: right;" class='cancel'/>
		</div>

	</div>
</div>
<script src="https://cdn.bootcss.com/jquery/2.2.0/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.downcount.js"></script>
<script type="text/javascript">
</script>
<script>
    //弹窗 活动未开始 或者  结束都不可以点击
   <?php if ($res['starttime'] <= time() && $res['overtime']>=time() &&  $res['num'] >0): ?> 
    $('#btn').click(function(){
        $('#box').show();
        $('#bb').show();
    });
  <?php endif; ?>
    $('#box').click(function(){
        $('#bb').hide();
        $('#box').hide();
    })
    //取消按钮
    $('.cancel').click(function(){
        $('#bb').hide();
        $('#box').hide();
    })
    //点击提交：
    $('.qd').click(function(){
    	  $.post("{:url('shop/agsecondillHandel')}",{id:<?php echo $res['id'];?>,pwd:$('#pwd').val()},function(res){
    	  	res =  JSON.parse(res);
             if(res.code){
             	window.location.href = "{:url('pay/weixin/seckillorder')}"+'?id='+<?php echo $res['id'];?>;
             }else{
             	alert('失败');
             }
         },'json');
    });

    // var url = "{:url('shop/orderod')}";
    // const ar = new Vue({
    //     el: '#info',
    //     data: {
    //         results: []
    //     },
    //     mounted() {
    //         axios.get(url)
    //             .then(function(response) {
    //                 ar.$data.results = response.data.data;
    //             })
    //             .catch(function(error) {
    //                 console.log(error);
    //             });
    //     }
    // });
    function leftTimer(year,month,day,hour,minute,second){
        var leftTime = (new Date(year,month-1,day,hour,minute,second)) - (new Date()); //计算剩余的毫秒数
        var days = parseInt(leftTime / 1000 / 60 / 60 / 24 , 10); //计算剩余的天数
        var hours = parseInt(leftTime / 1000 / 60 / 60 % 24 , 10); //计算剩余的小时
        var minutes = parseInt(leftTime / 1000 / 60 % 60, 10);//计算剩余的分钟
        var seconds = parseInt(leftTime / 1000 % 60, 10);//计算剩余的秒数
        days = checkTime(days);
        hours = checkTime(hours);
        minutes = checkTime(minutes);
        seconds = checkTime(seconds);
        setInterval("leftTimer(<?php echo date("Y",$res['overtime']);?>,<?php echo date("m",$res['overtime']);?>,<?php echo date("d",$res['overtime']);?>,<?php echo date("H",$res['overtime']);?>,<?php echo date("i",$res['overtime']);?>,<?php echo date("Y",$res['overtime']);?>)",1000);
        $('.days').html(days);
        $('.hours').html(hours);
        $('.minutes').html(minutes);
        $('.seconds').html(seconds);
        document.getElementById("timer").innerHTML = days+"天" + hours+"小时" + minutes+"分"+seconds+"秒";
    }
    function checkTime(i){ //将0-9的数字前面加上0，例1变为01
        if(i<10)
        {
            i = "0" + i;
        }
        return i;
    }
</script>

</body>
</html>

